<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>付款界面</title>
		<link rel="stylesheet" type="text/css" href="css/public/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/public/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/indexPage.css"/>
		<link rel="stylesheet" type="text/css" href="css/userPage.css"/>
		<style>
			#myModal .modal-content{
				padding:10px 20px;
				border-radius: 0;
				display: inline-block;
			}
			#myModal .modal-header,#myModal2 .modal-header,#myModal3 .modal-header{
				border-bottom: none;
			}
			
			#myModal .modal-body{
			    width: 580px;
				height: 410px;
				padding: 20px;
				overflow:auto;
			}
			#myModal .modal-body ul{
				padding:10px 20px;
				margin-bottom: 20px;
				border: 1px solid #ccc;
			}
			#myModal .modal-body ul.onChose{
				border: 2px solid #F5CEA7;
			}
			#myModal .modal-body ul li{
				cursor: pointer;
			}
			#myModal .modal-body ul li span{
				display: inline-block;
				line-height: 25px;
				font-size: 14px;
				color: #999;
			}
			#myModal .pre-scrollable{
				max-height: 410px;
			}
			#myModal .modal-body ul li span.text{
				color: #000;
			}
			#myModal .modal-body ul li span.default{
				font-size: 13px;
				color: #F5CEA7;
			}
			#myModal .modal-footer{
				text-align: center;
				margin-top: 10px;
				border-top: none;
			}
			#myModal2 .modal-footer,#myModal3 .modal-footer{
				text-align: right;
				margin-top: 10px;
				border-top: none;
			}
			#myModal .modal-footer .btn,#myModal2 .modal-footer .btn{
				padding: 9px 40px;
			}
		</style>
	</head>
	<body>
		<!-- header start -->
		<div id="header"></div>
		<!-- header end -->
		
		<!-- payPage start -->
		<div class="payPage">
			<div class="container">
				<div class="addressMessage">
					<div class="title">
						<h4>收货信息</h4>
					</div> 
					<div class="info clearfix">
						<div class="left fl-l">
							<div id="addAddressTableForm">
								<form action="" id="addressForm">
									<table   id="addAddressTable" style="display: block;">
										<tr>
											<td style="text-align: right;width: 10%;">收货地址&nbsp;</td>
											<td colspan="3">
												<select name="" class="form-control info" id="cityName" onchange="areaData(this)">
												</select>
												<select name="" class="form-control info" id="areaName" onchange="subareaData(this)">
												</select>
												<select name="" class="form-control info" id="subAreaName">
												</select>
											</td>
										</tr>
										<tr>
											<td style="text-align: right;">详细地址&nbsp;</td>
											<td colspan="3">
												<textarea id="streetNameTextArea" type="text" name="streetName" class="form-control"  style="width: 97%;"></textarea>
											</td>
										</tr>
										<tr>
											<td style="text-align: right;">收货人&nbsp;</td>
											<td>
												<input type="hidden" class="form-control" name="addressId" id="" value="" />
												<input type="text" class="form-control" name="userName" id="" value="" />
											</td>
											<td style="text-align: right;">手机号码&nbsp;</td>
											<td>
												<input type="text" class="form-control" name="tel" id="" value="" style="width: 93%;" />
											</td>
										</tr>
									</table>
								</form>
							</div>
							
							<ul id="reciveAddress" style="display: none;">
								<li>
									<img src="images/icon/location.png" alt="" /><a  id="modifyAddressBtn" style="cursor: pointer;">修改</a>
								</li>
								<li style="display:none;">
									地址编号:<span class="addressId"></span>
								</li>
								<li>
									收&nbsp;&nbsp;货&nbsp;人:<span class="reName">周立</span>
								</li>
								<li>
									联系方式:<span class="reTel">13883305345</span>
								</li>
								<li>
									收货地址:<span class="reAddress">福建省厦门市海沧区大黄路</span>
								</li>
							</ul>
						</div>
						<div class="right fl-r">
							<div  id="addressChage">
								<span id="" onclick="changeAddress()">更换收货地址</span>
								<a href="#" id="newAddress">新建地址</a>
							</div>
							<div id="addAddress" >
								<span id='ifDefault'>
								<div style="display:inline-block;"> <img id="checkIpt" src="images/icon/noCheck.png" alt="" style="" />
								<img id="checkedIpt" src="images/icon/checked.png" alt="" style="display: none;"/>
								</div>&nbsp;设为默认</span>
								<button  type="button" class="btn btn-danger" id="saveBtn">保存</button>
								<button  type="button" class="btn btn-default" id="cancelBtn">取消</button>
							</div>
						</div>
					</div>
				</div>
				
				<div class="goodsInfo clearfix">
					<table class="" id="orderListTable">
					  	<thead>
						    <tr>
						      	<th>商品信息</th>
						      	<th>单价</th>
						      	<th>数量</th>
						      	<th>小计</th>
						      	<th>实付</th>
						    </tr>
					  	</thead>
					  	<tbody>
					    	<tr>
					      		<td>
					      			<img src="images/912-1.JPG" alt="" />
					      			<span>商品描述</span>
					      		</td>
					      		<td>￥69.00</td>
					      		<td>1</td>
					      		<td>
					      			￥69.00
					      		</td>
					      		<td>
					      			<span>￥69.00</span>
					      		</td>
					    	</tr>
					    	<tr>
					      		<td><img src="images/912-1.JPG" alt="" />
					      			<span>商品描述</span></td>
					      		<td>￥69.00</td>
					      		<td>1</td>
					      		<td>
					      			￥69.00
					      		</td>
					      		<td>
					      			<span>￥69.00</span>
					      		</td>
					    	</tr>
					  	</tbody>
					</table>
					<div class="countMoney">
						<ul>
							<li><span>商品合计： </span><em >￥<span id="plusPrice">59.00</span></em></li>
							<li><span>运费：</span><em >￥<span id="diliverPrice">10.00</span></em></li>
							<li><span>实付金额：</span><em >￥<span id="total">59.00</span></em></li>
							<li><input type="button" class="btn btn-danger" value="去付款" onclick="commitOrder()"/></li>
						</ul> 
						<!-- <div class="addressPay fl-r">
							<span>周立 </span>
							<span>13883305345</span>
							<span>重庆市重庆市渝中区</span>
							<span>大坪大黄路62号</span>
						</div> -->
					</div>
					
				</div>
			</div>
		</div>
		<!-- payPage end -->
		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 650px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							选择收货地址
						</h4>
					</div>
					<div class="modal-body pre-scrollable">
						<ul class="onChose">
							<li><span>收货人：</span><span class="text">周立</span></li>
							<li><span>联系方式：</span><span class="text">13883305345</span></li>
							<li><span>收货地址：</span><span class="text">成全合成</span><span class="fl-r default">默认地址</span></li>
						</ul>
	
						<ul>
							<li><span>收货人：</span><span class="text">周立</span></li>
							<li><span>联系方式：</span><span  class="text">13883305345</span></li>
							<li><span>收货地址：</span><span class="text">成全合成</span><span class="fl-r default">默认地址</span></li>
						</ul>
					
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" id="sureChose" data-dismiss="modal" onclick="sureChose()">确定
						</button>
						<button type="button" class="btn btn-default"  id="cancelChose" data-dismiss="modal">
							取消
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
			</div>
			
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
				<div class="modal-dialog" style="width: 500px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myModalLabel2">
								确认付款
							</h4>
						</div>
						<div class="modal-body">
							<form class="form-inline" role="form" id="payForm">
								<div class="">
								    <label for="inputPwd" style="font-weight:normal;font-sixe:16px;">请输入支付密码</label>
								    <input type="password" class="form-control" id="inputPwd" style="width:78%;">
								</div>
								<span id="returnMsg" style="display:none;color:#D9534F;font-size:12px;">密码不正确</span>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-danger" id="surePay">确定
							</button>
							<button type="button" class="btn btn-default"  id="cancelPay" data-dismiss="modal">
								取消
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
				<div class="modal-dialog" style="width: 500px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myModalLabel3">
							</h4>
						</div>
						<div class="modal-body">
							<span>支付成功,返回首页!</span>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-danger" id="sureHref" data-dismiss="modal">确定
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			
			
		<!--content end-->
		
		
		<!--footer start-->
		<div id="footer"></div>
		<!--footer end-->
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/public.js"></script>
		<script type="text/javascript" src="js/pageJs/payPage.js"></script>
		
	</body>
</html>
